<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ include file="/pages/common/component.jsp"%>
<html>
<head>
<title>报表</title>

<script type="text/javascript">

var piechartOptions = 
{
	chart: {
		renderTo: '',
		plotBackgroundColor: null,
		plotBorderWidth: null,
		plotShadow: false
	},
	title: {
		text: ''
	},
	subtitle: {
		text: ''
	},
	tooltip: {
		formatter: function() {
			return '<b>'+ this.point.name +'</b>'+ this.y +'元,'+Highcharts.numberFormat(this.percentage, 1)+'%';
		}
	},
	plotOptions: {
		pie: {
			allowPointSelect: true,
			cursor: 'pointer',
			dataLabels: {
				enabled: true,
				color: '#000000',
				connectorColor: '#000000',
				formatter: function() {
					return '<b>'+ this.point.name +'</b>'+ this.y +'元,'+Highcharts.numberFormat(this.percentage, 1)+'%';
				}
			},
			point: {
             	events : {   
                	click : function(){//绑定饼图每个子节点的click事件   
						getSubPie(this.feeTypeId, this.chartType, this.name);
                   	}
            	}
          	}   
		}
	},
    series: [{
		type: 'pie',
		name: 'Browser share',
		data: [] 
		}]
};	


var linechartOptions = 
{
	chart: {
		renderTo: '',
		defaultSeriesType: 'line',
		marginRight: 130,
		marginBottom: 65
	},
	title: {
		text: '',
		x: -20 //center
	},
	subtitle: {
		text: '',
		x: -20
	},
	xAxis: {
		categories: [],
			labels: {
			rotation: -45,
			align: 'right',
			style: {
				 font: 'normal 13px Verdana, sans-serif'
			}
		}

	},
	yAxis: {
		title: {
			text: '元'
		},
		min:0,
		max:500,
		tickInterval:50
	},
	tooltip: {
		formatter: function() {
                return '<b>'+ this.series.name +'</b><br/>'+
				this.x +'消费'+ this.y +'元';
		}
	},
	legend: {
		layout: 'vertical',
		align: 'right',
		verticalAlign: 'top',
		x: -10,
		y: 100,
		borderWidth: 0
	},
	plotOptions: {
		line: {
			allowPointSelect: true,
			cursor: 'pointer',
			dataLabels: {
				enabled: true,
				color: '#000000',
				connectorColor: '#000000',
				formatter: function() {
					return ;
				}
			},
			point: {
            	events : {   
                	click : function(){//绑定饼图每个子节点的click事件   
                   		getOneDayPie(this.category);
               		}
            	}
       		}   
		}
	},
	series: [
		{
			name: '',
			data: []
		}
	]
};

<%
	String strStartDate = request.getParameter("startDate");
	String strEndDate = request.getParameter("endDate");
%>
	
function getOneMonthPie(){
	// 获取月消费Pie
	$.ajax({   
	    type: "POST",
	    url: "chartAction.do",
	    data: "method=getPieChart&startDate=<%=strStartDate%>&endDate=<%=strEndDate%>&feeType=0",
	    dataType:"json",
	    async: false,
	    cache: false,
	    success: function(json){
			piechartOptions.title.text = json.title;
			piechartOptions.subtitle.text = json.subtitle;
			piechartOptions.series[0].data = json.data;
			piechartOptions.chart.renderTo='onemonth_pie_container';
			new Highcharts.Chart(piechartOptions);
	    },
	    error: function(msg){
	       	alert("查询数据出错!请稍后再试!");
	    }
   	});
}

function getOneMonthLine(){
	// 获取月消费Line
	$.ajax({
	    type: "POST",
	    url: "chartAction.do",
	    data: "method=getLineChart&startDate=<%=strStartDate%>&endDate=<%=strEndDate%>&feeType=0&chartType=<%=Constants.CHART_TYPE_MONTH%>",
	    dataType:"json",
	    async: false,
	    cache: false,
	    success: function(json){
	    	linechartOptions.chart.renderTo='onemonth_line_container';
			linechartOptions.title.text = json.title;
	    	linechartOptions.series = json.series;
			linechartOptions.xAxis.categories = json.categories;
			new Highcharts.Chart(linechartOptions);
	    },
	    error: function(msg){
	       	alert("查询数据出错!请稍后再试!");
	    }
   	});
}

function getSubPie(feeTypeId, chartType, titleName){
	$('#sub_pie_container').html('');
	$("#sub_pie_container").dialog({modal:true, autoOpen:false});
	$("#sub_pie_container").dialog('option', 'title', titleName+' 细类支出');
	$("#sub_pie_container").dialog('option', 'width', 470);
	$("#sub_pie_container").dialog('option', 'height', 300);
	$("#sub_pie_container").dialog('open');
	$('#sub_pie_container').load('/venus/pages/chart/getSubPie.jsp?chartType='+chartType+'&feeTypeId='+feeTypeId+"&startDate=<%=strStartDate%>&endDate=<%=strEndDate%>");
}

$(document).ready(function(){
	getOneMonthPie();
	getOneMonthLine();
});

</script>
</head>
<body>
<table width='98%'  border='0' cellpadding='1' cellspacing='1' bgcolor='#CBD8AC' align="center" style="margin-top:8px; text-align: center;">
 <tr>
  <th colspan="2" align="center">
  	消费记录
  </th>
 </tr>
 <tr>
  <td>
  	<div id="onemonth_pie_container" style="width: 450px; height: 250px; margin: 0 auto"></div>
  </td> 
  <td>
  	<div id="onemonth_line_container" style="width: 750px; height: 250px; margin: 0 auto"></div>
  </td>
 </tr>
</table>

</body>
</html>